【第2266期】WeGame暗色模式实践总结
前言
4月份最后一周了。今日前端早读课文章由@腾讯P&P Design授权分享。
@腾讯P&Pdesign全称Platform & Publish Design，隶属于腾讯互动娱乐发行线下的设计中心，团队由视觉、交互、多媒体、UI开发人才构成，负责为腾讯游戏平台体系和发行业务提供体验和服务设计，包括WeGame平台、QQ游戏平台、游戏本地化设计、端游手游助手、移动社区等业务；致力于游戏平台、UI、社区设计领域的研究和沉淀
正文从这开始~~
导语
在夜深人静的时刻，我们终于可以更加肆无忌惮的打开wegame进行快乐的游戏。那是因为WeGame终于上线暗色模式功能啦，能让用户更加舒适地阅读体验。
为了追求更好的用户体验，WeGame在今年2月上线了暗色模式的功能，暗色模式给用户提供了一种更轻松的方式来接触游戏世界。给用户带来更加不同的可视性，给产品带来了全新的体验，让用户有更个性化的选择。
是不是迫不及待想体验一下暗色模式了？点击WeGame右上角设置，弹出设置弹框，即可选择深色模式体验。
起源
为什么想推进Wegame暗色模式？
1、满足不同Wegame游戏用户风格偏好：
Wegame自2018年TGP升级到WEGAME品牌 ，风格由深色风格调整为浅色风格，据调研浅色更利于用户信息阅读。但不少用户更偏好深色风格，因为深色烘托游戏氛围。且夜晚游戏期间夜间暗色阅读体验会更好。
2、暗色模式是种体验设计流行趋势
很多品牌都推出了各自版本的暗色模式，我们熟知的Windows、mac、Google等在自己的设计体系里早已有暗色模式设计；暗色模式在产品体验设计中的流行趋势的关注度由此开始上升，暗色模式设计逐渐被行业更多地重视起来到并发展成一种趋势。
3、提升用户体验
暗色模式的屏幕能让手机起到明显的省电效果，同时夜晚更能保护用户眼睛更舒服的浏览。
前期技术方案探索
早在一年前我们就开始对平台性站点如何高效低成本实现多主题方案进行探索预研。
问题痛点
俗话说：文明的多样性体现在软件领域，是一个绝对的灾难。
做研发的同学都能感受到在迭代频繁的大型平台项目，要想换新主题一是件非常难的事
1、平台性站点开发主题成本高
换主题对视觉，开发规范统一性要求非常高，可能你会说这不就是简单的换肤吗？是的是换肤逻辑，对于几个页面的小站点不算什么难事。但对于平台项目就有难度，如：WeGame项目十分复杂，共有10+个子项目 ，包括平台、商城、直播、300+个游戏助手等，国内版、国际版，端内版本，端外版本（适应各游戏平台风格），另外个性化要求高导致模块复用低，这让整体的换肤就会变得不可能完成的任务，其成本巨大。
2、迭代更新维护成本高
每次迭代都需要去顾忌其它皮肤的表现，每次迭代更新，你有多少套皮肤就需要去更改多少套皮肤里样式，这对开发成本太大。
如何低成本，高效率的设计，开发与维护个性化主题？
解决思路：提炼规律，让机器代替人工，我们研究探索了一套设计体系验证了其可行性。
解决方案
打造一套设计系统–P&P UIKIT
P&P 设计系统是让团队理解并使用一种统一的设计语言进行设计与开发落地的方法，它贯穿于从设计到开发执行过程中，致力于维系体验统一以及提升设计到开发效率。
设计系统组成
我们从组件化角度出发，建立标准底层组件库，增强各业务模块的底层复用；抽离底层视觉语言并传递到每个页面每个模块。确保风格一致性。再通过设计工具，开发框架的升级确保组件在业务团队中执行。规则统一才能找出规律，才能找到让机器代替人工工业化生产。逻辑如下所示：
这里将重点分享换肤机制：
Token\组件库在设计中的应用
换肤重要就是换视觉语言，因此Token前期提炼到后期到每个元素的应用规则的整理是最重要的环节。
1、Token（视觉语言/设计变量）
Token可以叫视觉语言或叫设计变量是设计标准规范的核心部分，是传递品牌统一重要因素,也是设计和开发实现统一的桥梁
做设计的同学都知道，画面中任何一个元素都是由点线面组成同样在Web实现也是如此，UI界面元素可以抽象其通用属性，不同的属性参数组成不同的元件，如背景，边线，文字，尺寸，阴影，圆角。
因此 我们将这些属性与具体的样式解偶，将这些通属能定义为Token，他们是背景，边线，文字，尺寸，阴影，圆角。
2、让Token与组件关联
充分发挥XD软件作用，利用XD工具设计师将设计Token通过层层关联到组件中，它们会在传达品牌的个性时起到十分重要的作用，让整体保持视觉的一致性。
同理，前端开也也需要按同一规范将Token值代码化关联到每个开发组件中
效果：通过Token让设计师在设计过程中快速换肤
仅通过Token替换迅速将规范生成深色版，并直接应用到业务中去
3、设计与开发如何协同
在迭代过程中难以避免设计师需要优化Token颜色的情况，如果让上下游对接和沟通更高效呢？
我们开发了XD的Token插件能一键将 Token（XD文件）转化成技术Sass变量代码
4、主题管理编译工具：用替换Token生成相应主题样式
当一个站点为用户提供多套主题功能时，在迭代过程中同时维护几套主题成本就更高了，当原模块样式要做优化修改时，同时还需要兼顾多套主题样式是否适配问题。现正流行的暗黑模式与浅色模式就存在这样的维护成本。
通过Token及管理工具自动生成（N ）份主题皮肤
一份平台样式表通过不同的Token生成对应的样式文件，迭代时同时编译主题，只需关注当前版本，无需顾虑其它版本是否存在样式问题。也无需手动复制相应样式文档，送到到指定的项目目录。
针对仅平台体验统一的需求，仅需要通过一级Token编译生成
好处：自动化管理样式，后期维护简单，安全性高，仅维护一套样式代码
WEBGAME深色模式落地过程总结
WeGame的深色模式落地的过程中我们遇到了多个挑战，WeGame承载着非常多的项目。量大体小是它独有的特点，成千上万的页面，数以万计的图片要如何处理，技术上如何实现等等是我们在改造项目中遇到的难点。
我们整理为以下几个问题及要点进行介绍：
基于P&P UIKit 探索深浅换肤方案介绍；
如何将大批量的SCSS变量转换为CSS变量？
页面图标及图片如何支持深浅色换色？
定制化项目换色方案
基于P&P UIKit 探索深浅换肤方案介绍
我们项目中使用 P&P UIKit 主要解决了多主题的设计及开发（如WeGame国内版及国际版）但在深浅换肤的需求中，假如按照多主题的方式进行资源的动态引入样式，页面在切换过程中会存在资源的网络加载，并且多主题样式之间存在样式重复冗余，我们需考虑深浅样式切换带来的平滑感，因此需要思考一下如何优雅的实现深浅换肤。
a. 使用Prefers-color-scheme 实现页面需根随系统深浅主题切换：
WeGame 客户端外页面需根随系统主题切换而进行深浅切换，我们在端外可采用CSS @prefers-color-scheme ，在返回值为dark mode 时，将文件中的 CSS 变量值切换深色主题色值实现切换，在不支持prefers-color-scheme的低版本浏览器中，将保持浅色模式的设计。
b. 客户端内场景实现深浅切换；
WeGame 客户端内浏览器内核为 QBlink70 版本，不支持CSS prefers-color-scheme，因此，我们采用桌面客户端与前端页面进行通信的方式，在开发过程中将CSS变量声明放在约定好的CSS Class中，当桌面客户端返回接口数据给页面前端时，页面前端进行切换 CSS Class 实现切换深浅主题。
c. 保证切换体验平滑度
在开发过程中我们只维护一份源码，将深浅两份Tokens同时引入入口CSS文件，资源一次性请求，避免了在深浅模式切换过程中的加载感，实现了平滑切换深浅模式。
2、如何将大批量的SCSS变量转换为CSS变量？
我们的深浅模式切换，项目源码中存在大量的SCSS文件，文件中存在非常多的SCSS变量，SCSS变量编译为CSS后，会被编译为具体值，因此，我们需要考虑如何高效的将大量的SCSS转换为CSS变量的写法来实现切换深浅主题。
解决方案：
我们针对这个场景问题，将SCSS转换为CSS变量的功能加入到PDP-theme中进行“无感知”编译，项目文件基于 PDP-theme 可以迅速将大量SCSS文件中的SCSS变量编译为CSS变量进行使用，同时编译过程中我们还加入了兼容IE的处理，这个功能使我们不需要额外维护CSS变量，开发方式不受影响。
IE浏览器兼容性处理问题方案：
E浏览器不支持多CSS媒体属性：使用@media prefers-color-scheme来根据系统颜色进行切换主题色的方法不能奏效。因为IE用户不多，所以我们并没有针对IE场景去做深浅换肤，我们首要考虑的是页面能否在IE浏览器正常显示。
3、页面图标及图片如何支持深浅色换色？
(1) 小图标换色支持方案
我们采用将位图图标切换成svg图标的方法。将位图图标切换成svg图标，不仅可以支持换色，同时还可以利用svg Sprite Loader插件打包，防止相同的svg在页面上重复绘制path，影响性能。
我们在定义了一组图形对象（使用 <symbol>元素）之后，就可以使用 <use>元素来对它进行无限次实例化展示。你使用xlink:href属性来指定你想要展示哪一组图标。
(2) 大图背景换色支持方案
WeGame平台内有459款，每个游戏都有自己的助手页。
每个助手页都有独立特色的背景大图，针对深浅背景图案，在过去设计师通常会设计两版不同的背景大图：
那么多的游戏助手页，要分别设计两款不一样的背景大图，显然是不可能的，我们的解决方案是：给背景加上一个深色的蒙层遮住
4、定制化项目换色方案
WeGame平台承载着很多的项目，其中不乏存在一些有独立特色风格的项目，以三大助手为例：LOL助手、CF助手、DNF助手。
三大助手的主题色与wegame主题色不同，举个例子：wegame的主题颜色是黄色，三大助手各自主题色文字在wegame的通用背景色下，对比对不明显且不易识别。
所以我们遇到的最大问题是配色问题：
我们的思路是先沿用wegame的配色体系去修改三大助手，再由设计师走查重构稿调整优化。
1.设计师再提取项目的二级主题色token
二级token要如何使用，这么里不得不夸赞一下pdp-theme的优势，我们的开发同学早早在pdp-theme里扩展了这项功能，自研的工具可以实时的针对问题点及时更新优化。
2.设计师再结合当前项目风格调整wegame一级token色值
从预研到落地，我们面多诸多的挑战，最终在今年的2月初，能支持深色模式的WeGame终于与大家见面了。说到这里还不快去体验一下？
关于本文 作者：@腾讯P&P Design 原文：https://mp.weixin.qq.com/s/AlQZcrS29HLS5X6CwZL4CQ
为你推荐
欢迎自荐投稿，前端早读课等你来。